<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Amazon Coupon Distribution Administrator Platform</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/excel-bootstrap-table-filter-style.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="app">
        <div id="wrapper">
            <div class="overlay"></div>

            <!-- Sidebar -->
            <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
                <ul class="nav sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="#">
                            Management Platform
                        </a>
                    </li>
                    <li>
                        <a href="User-Information.html"><i class="fa fa-fw fa-home"></i> User Information</a>
                    </li>
                    <li>
                        <a href="Coupon-Information.html"><i class="fa fa-fw fa-folder"></i> Coupon Information</a>
                    </li>
                    <li>
                        <a href="Product-Information.html"><i class="fa fa-fw fa-file-o"></i>Product Information</a>
                    </li>
                </ul>
            </nav>
            <!-- /#sidebar-wrapper -->

            <!-- Page Content -->
            <div id="page-content-wrapper">
                <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
                    <span class="hamb-top"></span>
                    <span class="hamb-middle"></span>
                    <span class="hamb-bottom"></span>
                </button>
                <!-- 主页面内容 -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- 表格开始 -->
                            <table class="table table-bordered table-hover table-striped table-intel" id="table">
                                <thead>
                                    <tr>
                                        <th class="no-filter no-sort no-search none">Id</th>
                                        <th class="no-filter">Category</th>
                                        <th class="no-filter">Trade Name</th>
                                        <th class="no-filter no-sort">User Name</th>
                                        <th class="no-filter">Discount</th>
                                        <th class="no-filter no-sort">Date of issuance</th>
                                        <!-- <th class="no-filter no-sort no-search none">Grant</th> -->
                                    </tr>
                                </thead>
                                <tbody>

                                    <tr v-for="item in list" :key="item.Id">
                                        <td>{{ item.couponRecordId }}</td>
                                        <td v-text="item.productType"></td>
                                        <td v-text="item.productName"></td>
                                        <td v-text="item.email"></td>
                                        <td v-text="item.finalDiscount"></td>
                                        <td v-text="item.distributeTime"></td>
                                        <!-- <td><a href="" @click="grant()">Grant</a></td> -->
                                    </tr>
                                </tbody>
                            </table>
                            <!-- 表格结束 -->
                        </div>
                    </div>

                </div>
                <!-- 结束主页面内容 -->
                <!-- /#page-content-wrapper -->

            </div>
        </div>
    </div>
    <!-- /#wrapper -->

    <!-- <script src="js/jquery-1.8.3.min.js"></script> -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/excel-bootstrap-table-filter-bundle.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var trigger = $('.hamburger'),
                overlay = $('.overlay'),
                isClosed = false;

            trigger.click(function () {
                hamburger_cross();
            });

            function hamburger_cross() {

                if (isClosed == true) {
                    overlay.hide();
                    trigger.removeClass('is-open');
                    trigger.addClass('is-closed');
                    isClosed = false;
                } else {
                    overlay.show();
                    trigger.removeClass('is-closed');
                    trigger.addClass('is-open');
                    isClosed = true;
                }
            }

            $('[data-toggle="offcanvas"]').click(function () {
                $('#wrapper').toggleClass('toggled');
            });
        });
    </script>
    <!-- 排序、搜索 -->
    <script type="text/javascript">
        $(function () {
            $('#table').excelTableFilter({
                'captions': { search: '搜索', a_to_z: '升序排列', z_to_a: '降序排列', select_all: '全选' }
            });
        });
    </script>
    <!-- 创建vue实例 -->
    <script>
        Vue.http.options.emulateJSON = true;
        var vm = new Vue({
            el: '#app',
            data: {
                couponRecordId: '',
                productType: '',
                productName: '',
                email: '',
                finalDiscount: '',
                distributeTime: '',
                list: [
                ]
            },
            created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
                this.getAllList()
            },
            methods: {
                getAllList() {
                    this.$http.get('http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded/CouponRecordController/handleGetAllCouponRecords')
                    .then(result => {
                        var res = result.data;
                        console.log(res)
                        if (res.statu === 10000) {
                            // 成功了
                            this.list = res.data
                        } else {
                            // 失败了
                            alert('获取数据失败！')


                        }
                    })

                },
                // getAllList方法结束
                // grant(){
                //     this.$http.post('url', {couponRecordId=this.couponRecordId,productType=this.productType,productName=this.productName,email=this.email,finalDiscount=this.finalDiscount,distributeTime=this.distributeTime},{ emulate: true })
                //     .then(result => {
                //         var res = result.data
                //         console.log(res)
                //         if (result.data.statu === 10000) {
                //                 // 成功了！
                //             alert('发送成功！')
                //             } else {
                //                 // 失败了
                //                 alert('发送失败！')
                //             }
                //         })
                // }
            }
        })
        
    </script>


</body>

</html>